<template>
    <div class="step-box">
      <ol>
        <li>点击下方按钮，打开武汉大学综合理解系统登录页</li>
        <li>请在新窗口中手动登录（学号/密码）</li>
        <li>登录成功后，按 <kbd>F12</kbd> 打开开发者工具</li>
        <li>在 <b>Network</b> 选项卡中找到请求，复制 <b>Cookie</b> 并粘贴到下方输入框</li>
        <li>点击"提交Cookie"，系统将自动抓取并同步课表数据</li>
      </ol>
      <div class="tip-box">
        <p><strong>💡 获取Cookie方法：</strong></p>
        <p>1. 登录后按F12 → Network选项卡</p>
        <p>2. 找到任意请求 → Headers → Request Headers → Cookie</p>
        <p>3. 复制完整的Cookie值粘贴到下方</p>
      </div>
    </div>
  <div class="school-log-container">
    <h2>学校官网登录抓取</h2>
    <div class="step-box">
      <ol>
        <li>点击下方按钮，打开学校官网登录页</li>
        <li>请在新窗口中手动登录（学号/密码）</li>
        <li>登录成功后，<b>手动复制</b>登录后的 Cookie 并粘贴到下方输入框</li>
        <li>点击“提交Cookie”，系统将自动抓取并同步数据</li>
      </ol>
    </div>
    <el-button type="primary" @click="openSchoolLogin">打开武汉大学综合理解系统</el-button>
    <div class="cookie-box">
      <el-input
        v-model="cookie"
        type="textarea"
        :rows="3"
        placeholder="请粘贴登录后的Cookie"
        style="margin: 16px 0; width: 100%;"
      />
      <el-button type="success" :disabled="!cookie" @click="submitCookie">提交Cookie</el-button>
    </div>
    <el-alert v-if="msg" :title="msg" type="success" show-icon style="margin-top: 20px;" />
  </div>
</template>

<script setup lang="ts">
import { ref } from 'vue'
import api from '../../api/request'

const cookie = ref('')
const msg = ref('')

const openSchoolLogin = () => {
  window.open('https://zhlj.whu.edu.cn/pc/index', '_blank')
}

const submitCookie = async () => {
  try {
    const res = await api.post('/api/cookie', { cookie: cookie.value })
    msg.value = 'Cookie 提交成功，正在同步课表数据...'
    console.log('服务器响应:', res)
  } catch (e: any) {
    msg.value = '提交失败：' + (e?.response?.data?.message || e?.message || '未知错误')
  }
}
</script>

<style scoped>
.school-log-container {
  max-width: 500px;
  margin: 40px auto;
  background: #fff;
  border-radius: 10px;
  box-shadow: 0 2px 12px rgba(0,0,0,0.06);
  padding: 32px 24px 24px 24px;
}
.step-box {
  margin-bottom: 18px;
  color: #666;
}
.tip-box {
  background: #f0f9ff;
  border: 1px solid #0ea5e9;
  border-radius: 6px;
  padding: 12px;
  margin-top: 12px;
  font-size: 13px;
  color: #0369a1;
}
.tip-box p {
  margin: 4px 0;
}
kbd {
  background: #f1f5f9;
  border: 1px solid #cbd5e1;
  border-radius: 3px;
  padding: 2px 4px;
  font-size: 12px;
}
.cookie-box {
  margin-top: 18px;
}
</style>
